<template>
	<view>
		
			<view class="header">
			    <view class="justify-between headerSearch align-center">
			       <view class="city align-center" @click="open" v-if="areaList.length">
			           {{ areaList[areaFocus].name}} <uv-icon name="arrow-down-fill" size="8" color="rgba(68, 68, 68, 1)"></uv-icon>
			       </view>
			       <text class="mlr10 line"></text>
			        <input type="text" v-model="keyword" class="flex1" placeholder="请输入关键词搜索" />
			        <uv-icon color="#000" @click="search" size="28" name="search"></uv-icon>
                    
			    </view>
			</view>
			<view class="bgWhite justify-between plr15 ptb15 ft14" style="color: #333333;" >
				<view class="align-center" @click="openStore">
					{{ store?store:"签约门店" }} <uv-icon name="arrow-down-fill" size="9" color="#C7C7C7"></uv-icon>
				</view>
				<view class="align-center" @click="showAgePicker">
					{{age?age:"年龄" }} <uv-icon name="arrow-down-fill" size="9" color="#C7C7C7"></uv-icon>
				</view>
				<view class="align-center" @click="showXueliPicker">
					{{height?height:"身高" }} <uv-icon name="arrow-down-fill" size="9" color="#C7C7C7"></uv-icon>
				</view>
				<view class="align-center" @click="showLevelPicker">
					{{level?level:"段位" }} <uv-icon name="arrow-down-fill" size="9" color="#C7C7C7"></uv-icon>
				</view>
			</view>
			<view class="plr15">
			<view class=" justify-between flex-wrap ">
				<view class="peopleInfo" v-for="(item,index) in gyList " :key="index" @click="toMain(item)">
					<image style="width: 340rpx;height: 370rpx;border-radius: 15rpx ;" :src="item.image"
						mode=""></image>
					<view class=" peopleTag ">
						<view class="taginfo">
							<image src="/static/images/index/i2.png" mode="widthFix"
								style="width: 20rpx;margin-right: 4rpx;"></image>
							{{item.type_name}}
						</view>
						<view class="tagStatus">
							<text class="point"></text>
							{{item.status==1?'工作中':"空闲"}}
						</view>
					</view>
					<view class="peoplename justify-between">
						{{item.name}}
						<view class="align-center">{{item.eval}} <uv-icon size="14" color="#fff" name="star-fill"></uv-icon>
						</view>
					</view>

				</view>

				
			</view>
            <view class="" v-if="gyList.length==0">
            	<uv-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"></uv-empty>
            </view>
		</view>
			<uv-picker ref="picker" :columns="[areaList]"  keyName="name" @confirm="confirm"></uv-picker>
			<uv-picker ref="levelPicker" keyName="name" :columns="[levelList]" @confirm="levelConfirm"></uv-picker>
            <uv-picker ref="storePicker" keyName="name" :columns="[storeList]" @confirm="storeConfirm"></uv-picker>
            <uv-picker ref="agePicker" :columns="[ageList]"  keyName="name" @confirm="ageConfirm"></uv-picker>
            <uv-picker ref="heightPicker" :columns="[heightList]"  keyName="name" @confirm="heightConfirm"></uv-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				gyList: [
				],
				yhList: [],
				orderList: [],
				page:1,
                keyword:"",
                areaList:[],
                areaFocus:0,
                start_age:'',
                end_age:'',
                age:"",
                levelList: [{
                		name: '1-3段',
                		id: 1
                	},
                	{
                		name: '3-5段',
                		id: 2
                	},
                	{
                		name: '5-7段',
                		id: 3
                	},
                	{
                		name: '7-9段',
                		id: 4
                	},
                    {
                    	name: '9-11段',
                    	id: 5
                    },
                ],
                height:"",
                heightList: [{
                		name: '1.6M-1.7M',
                        value:{ startage:'1.6',endAge:'1.7' }
                	},
                	{
                		name: '1.7M-1.8M',
                         value:{ startage:'1.7',endAge:'1.8' }
                	},
                	{
                		name: '1.8M-1.9M',
                         value:{ startage:'1.8',endAge:'1.9' }
                	},
                	{
                		name: '1.9M-2.0M',
                         value:{ startage:'1.9',endAge:'2.0' }
                	},
                  
                ],
                ageList:[
                    { name:"19-20岁",value:{ startage:19,endAge:20 }},
                    {name:"21-22岁",value:{ startage:21,endAge:22 }},
                    {name:"23-24岁",value:{ startage:23,endAge:24 }},
                    {name:"25-26岁",value:{ startage:25,endAge:26 }},
                    {name:"27-28岁",value:{ startage:27,endAge:28 }},
                    {name:"29-30岁",value:{ startage:29,endAge:30 }},
                     {name:"30岁及以上",value:{ startage:30,endAge:999 }},
                ],
                storeList:[],
                store:"",
                shop_id:"",
                level:""
			}
		},
		onLoad() {
			// this.getIndex()
			// this.getOrder()
			// this.getAreaList()
			// this.getCate()
			
			
			
		},
        onShow() {
            this.page=1
            this.gyList=[]
            this.age=''
            this.start_age=''
            this.store = ''
            this.shop_id = ''
            this.end_age=''
            this.height=''
            
            this.keyword=''
            this.level=''
            this.getStore()
            this.getArea()
            
            
            
        },
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
            
            async getStore(){
            let list = await  this.$api.getShopList()
            
            this.storeList =list.list
            },
            async getArea(){
            let arealist = await  this.$api.getArea()
            console.log(arealist)
            this.areaList =arealist.data
            this.getList()
            },
          
            levelConfirm(e) {
                
            	this.level = e.value[0].name
                this.page=1
                this.gyList=[]
                this.getList()
            },
           
            showLevelPicker(){
            	this.$refs.levelPicker.open()
            },
            showXueliPicker(){
                this.$refs.heightPicker.open()
            },
            heightConfirm(e){
              this.height = e.value[0].name  
              this.start_age  =e.value[0].value.startage
              this.end_age =e.value[0].value.endAge
              this.page=1
              this.gyList=[]
              this.getList()
            },
            storeConfirm(e){
                
                this.store =  e.value[0].name  
                this.shop_id =  e.value[0].id  
                this.page=1
                this.gyList=[]
                this.getList()
            },
            openStore(){
                this.$refs.storePicker.open()
            },
            confirm(e){
              console.log(e)  
              this.areaFocus=e.indexs[0]
              this.gyList=[]
              this.page=1
              this.getList()
            },
            showAgePicker(){
                this.$refs.agePicker.open()
            },
            ageConfirm(e){
                this.age=e.value[0].name
                this.start_age  =e.value[0].value.startage
                this.end_age =e.value[0].value.endAge
                this.gyList=[]
                this.page=1
                this.getList()
                    console.log(e)
            },
            open(){
                this.$refs.picker.open()
            },
			click(e) {
				console.log(e)
			},
            search(){
               this.page= 1
               this.gyList=[]
               this.getList()
            },
			toUserList() {
				uni.navigateTo({
					url: '/pages/artist/index'
				})
			},
			toAct() {
				uni.navigateTo({
					url: '/pages/activity/index'
				})
			},
			toBooking() {
				uni.switchTab({
					url: '/pages/tabbar/chat'
				})
			},
			toApply() {
				uni.navigateTo({
					url: '/pages/artApply/index'
				})
			},
			
			async getList() {
				const {
					list
				} = await this.$api.getBabyList({
					page:this.page,
					area_id:  this.areaList[this.areaFocus].id,
					shop_id:this.shop_id,
					start_height:this.start_age,
					end_height:this.end_age,
					
					level:this.level,
					keyword:this.keyword
				})
				console.log(list)
				this.gyList =[...this.gyList,...list]
			},
			async getList1() {
				const {
					data,
					code
				} = await this.$api.activityList({
					categoryId: 2
				})
				console.log(code, data)
				if (code == 200) {
					this.yhList = data
				}
			},
			async getList2() {
				const {
					data,
					code
				} = await this.$api.activityList({
					categoryId: 3
				})
				console.log(code, data)
				if (code == 200) {
					this.orderList = data
				}
			},

			toArticleMain(i) {
				uni.navigateTo({
					url: '/pages/article/index?id=' + i.id
				})
			},
			toMain(item) {
				uni.navigateTo({
					url: '/pages/userMain/index?id=' + item.id
				})
			},
			toArtCate(index) {
				uni.navigateTo({
					url: '/pages/activity/index?index=' + index
				})
			},
			change(data) {
				uni.navigateTo({
					url: '/pages/addressMain/index?id=' + data
				})
			}
		},


	}
</script>
<style scoped lang="scss">
	.content {
		min-height: 100vh;
		position: relative;
		z-index: 99;
	}

	.formBox {
		position: relative;
		margin: 30rpx 0;
		text-align: center;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;

	}

	.formBox::before {
		position: absolute;
	}

	.bggray6 {
		border-radius: 5rpx;
		align-items: center;
		flex: 1;
		padding: 14rpx 17rpx 20rpx;
		// background-color: #F4F6F8;
		border-bottom: 1rpx solid #E4E4E4;
		font-size: 30rpx;
		color: #555;

		.send {
			width: 32rpx;
			height: 32rpx;
			padding: 4rpx;
			color: #fff;
			text-align: center;
			line-height: 32rpx;
			background: #277CC0;
			border-radius: 50%;
			font-size: 20rpx;
			margin-right: 11rpx;
		}

		view {
			flex: 1;
		}

		margin-bottom: 14rpx;
	}

	.right {
		margin-left: 17rpx;
	}

	.cartype {
		image {
			width: 34rpx;
			margin-right: 11rpx;
		}

		view {
			flex: 1;
		}

		input {
			flex: 1;
			font-size: 28rpx;
		}
	}

	.submit {
		background: #F24611;
		border-radius: 5rpx;
		color: #fff;

		text-align: center;
		font-size: 25rpx;
		line-height: 60rpx;
		height: 60rpx;
		margin-bottom: 16rpx;
	}

	.chat {
		background-color: #277CC0;
		border-radius: 5rpx;
		line-height: 60rpx;
		height: 60rpx;
		color: #fff;
		display: flex;
		font-size: 25rpx;

		justify-content: center;
		align-items: center;

		image {
			width: 36rpx;
			margin-right: 12rpx;
		}
	}

	.moduleTitle {

		font-weight: 500;
		font-size: 36rpx;
		color: #3D3D3D;
		margin: 30rpx auto;
		margin-left: 20rpx;
		text-align: center;
		font-weight: bold;
		position: relative;

		text {


			position: relative;
			z-index: 99;
		}
	}

	.moduleTitle::before {
		position: absolute;
		left: -10rpx;
		top: 0;
		bottom: 0;
		margin: auto;
		clear: both;
		content: '';
		z-index: 9;
		width: 8rpx;
		height: 29rpx;
		background: #01C588;
		border-radius: 4rpx;



	}


	.orderItem {
		font-size: 24rpx;
		color: #666;

		image {
			width: 205rpx;
			height: 205rpx;
			border-radius: 15rpx;
			margin-right: 20rpx;

		}

		.orderright {
			width: 376rpx;

			.orderName {
				font-weight: bold;
				font-size: 26rpx;
				color: #1C1C1C;
			}

			.price {
				color: #2CC6A1;
				font-size: 26rpx;
			}
		}

		.apply {
			width: 132rpx;
			height: 54rpx;
			background: #2CC6A1;
			border-radius: 60rpx;
			line-height: 54rpx;
			text-align: center;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	.noticeSwiper {

		height: 63rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 0rpx 0rpx rgba(9, 2, 4, 0.03);
		border-radius: 12rpx;
		padding: 0 24rpx;
		color: #555555;

		text {
			margin: 0 8rpx;
		}
	}

	.noticeSwiper .swiper-item {
		height: 100%;
	}

	.swiper {
		image {
			height: 300rpx;
			width: 688rpx;
			border-radius: 12rpx;
		}
	}

	.menuBox {
		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 8rpx;
		}

		.menu {
			background-size: 100% 100%;
			background-position: center;
			width: 330rpx;
			height: 150rpx;
			font-weight: 500;
			padding-left: 38rpx;
			font-size: 28rpx;
			margin-top: 32rpx;
		}


	}

	.dataitem {
		font-size: 28rpx;
		color: #3D3D3D;
		line-height: 48rpx;
		margin-right: 106rpx;

		image {
			width: 70rpx;
			margin-bottom: 20rpx;

		}
	}

	.gridItem {
		image {
			width: 221rpx;
			height: 140rpx;

		}

		font-size: 30rpx;
		color: #222222;
	}
</style>
<style scoped lang="scss">
	.title {
		font-weight: bold;
		font-size: 36rpx;
		color: #111111;
	}
</style>